.root {
  &-input {
    display: block;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    width: 100%;
    resize: none;
    padding: 9px 14px;
    padding-right: 26px;
    background: var(--alinea-fields);
    box-shadow: var(--alinea-fields-shadow);
    border-radius: var(--alinea-border-radius);
    line-height: 1.5;

    &:focus {
      background: var(--alinea-fields-selected);
      outline: 2px solid var(--alinea-fields-focus);
    }

    &-container {
      position: relative;
    }
  }

  &-suffix {
    position: absolute;
    top: 0;
    bottom: 0;
    white-space: nowrap;
    line-height: 1.5;
    padding: 9px 0;
    opacity: 0.4;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-hidden {
    font: inherit;
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
}
